<template>
  <div style="background: #fff; padding: 30px">
    <div class="Title">工作流创建</div>
    <div class="flewbtn">
      <el-select
        v-model="state.typeVal"
        placeholder="展具类型"
        class="elSelect_a"
        size="large"
      >
        <el-option
          v-for="item in state.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :popper-append-to-body="false"
        />
      </el-select>
      <el-select
        v-model="state.rankVal"
        placeholder="展具级别"
        class="elSelect_a"
        size="large"
      >
        <el-option
          v-for="item in state.optionsTwo"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button @click="onCheckList" size="large" type="primary">查询</el-button>
      <el-button @click="onDelectList" size="large">清除</el-button>
      <el-button @click="addListItem" size="large">增加</el-button>
    </div>
    <!-- 展示和编辑表格 -->
    <el-scrollbar style="margin-bottom: 20px" height="700px">
      <el-table
        :data="filterTableData"
        :header-cell-style="{
          'text-align': 'center',
          background: '#f2f3f5',
          height: '50px',
          color: '#000000',
          'font-size': '15px',
        }"
        :cell-style="{ 'text-align': 'center' }"
        style="width: 100%"
        ref="multipleTableRef"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="工作流名称" prop="flowTitle" />
        <el-table-column label="示例图配置" prop="expImg">
          <template v-slot="scope"> 
            <el-image 
              preview-teleported="true" 
              :initial-index="0" 
              :preview-src-list="scope.row.srcList" 
              style="width: 120px; height: 100px; border-radius: 10px; margin-top:6px" 
              :src="scope.row.expImg" 
              @error="imageErr(scope.row.expImg,scope.row.srcList)"
              fit="fit"/> 
          </template>
        </el-table-column>
        <el-table-column label="工作流模板" prop="model" />
        <el-table-column label="归属列" prop="blongtype" />
        <el-table-column label="状态" prop="workStatus" />
        <el-table-column label="客户运营呈现" prop="workCust" />
        <el-table-column align="right">
          <!-- <template #header>
		        <el-input v-model="search" size="small" placeholder="Type to search" />
		      </template> -->
          <template #header>
            <div>操作</div>
          </template>
          <template #default="scope">
            <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
            <el-button
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              type="primary"
              text
              >编辑</el-button
            >
            <!-- <el-button
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              type="primary"
              text
              >删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <!-- 分页显示 -->
    <!-- <el-pagination
      background
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5, 10, 15, 20]"
      :small="small"
      :disabled="disabled"
      layout="total, prev, pager, next, sizes"
      :total="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="display: flex; justify-content: flex-end"
    /> -->

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="state.showModel"
      title="编辑项目"
      width="500px"
      align-center
      style="font-weight: 600"
      @close="closeModelEvel"
    >
      <el-scrollbar height="600px">
        <div class="workInput">
          <div class="workInput_a">
            工作流名称
          </div>
          <el-input
            v-model="state.workName"
            size="small"
            maxlength="30"
            style="flex: 8"
            class="enterpriseName"
          />
        </div>
        <div class="workInput" style="margin-top: 20px;">
          <div class="workInput_a">
            工作流排序
          </div>
          <el-input
            v-model="state.workSortVal"
            type="number"
            size="small"
            maxlength="6"
            min="0"
            style="flex: 8"
            class="enterpriseName"
          />
        </div>
        <div style="display: flex; margin-top: 15px">
          <div class="work_b">
            工作流模板
          </div>
          <el-select v-model="state.mouldVal" @change="getSelModel" class="elSelect" size="default">
            <el-option
              v-for="item in state.mouldArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="work_a" v-if="state.modelValIdx != 11">
          <div class="workInput_b">
            上传图片数量
          </div>
          <el-input
            type="number"
            v-model="state.limitImg"
            style="flex: 8"
            min="0"
            size="small"
            maxlength="2"
            class="enterpriseName"
          />
        </div>
        <template v-if="state.modelValIdx != 11">
        <div style="display: flex; margin-top: 15px" v-if="state.wid != ''">
          <div style="margin: 15px 15px 10px 10px; font-weight: 600">示例图配置</div>
          <el-image
            style="width: 130px; height: 100px; border-radius: 10px"
            preview-teleported="true"
            :preview-src-list="state.uploadImgList_a"
            :src="state.uploadImg_a"
            @error="imageErr(state.uploadImg_a, state.uploadImgList_a)"
            fit="cover"
          />
        </div>
        <div class="workInput_c">
          <div class="uploadTit">
            示意图片
          </div>
          <div>
            <el-upload
              v-model:file-list="state.uploadImgList"
              :http-request="selfUploadPic"
              action="upUrl"
              list-type="picture-card"
              :on-change="OnChange"
              multiple
              :on-exceed="handleExceed"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-error='fileErr'
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="state.dialogVisible">
              <!-- <img w-full :src="state.dialogImageUrl" alt="Preview Image" /> -->
               <el-image :src="state.dialogImageUrl" :fit="contain" />
            </el-dialog>
            <!-- 加载进度条 -->
            <!-- <el-progress v-if="state.showProcess" :percentage="state.processLength" :stroke-width="2" ></el-progress> -->
            <div style="font-size: 10px; color: #b8b8b8; margin-top: 10px;">{{ state.picTip }}</div>
          </div>
        </div>
      </template>
        
        <!-- 这里的卡片模块数据要用循环来做渲染 -->
        <template v-if="state.modelValIdx == 11">
           <div style="display: flex; margin-top: 15px">
              <div style="flex: 2; font-weight: 600;">展具物料细项</div>
              <div style="display: flex; flex-direction: column; justify-content: center; flex: 8;">
                <!-- 需要循环的卡片数据 -->
                <div class="workInput_d_a" v-for="(item, index) in state.cardList" :key="index">
                  <!-- 展具的名称和示意图数据 -->
                  <div @click="checkIndex(index)">
                  <div style="margin-bottom: 10px;">
                    <el-input
                      v-model="item.title"
                      @input="getCardtTitle"
                      placeholder="请输入物料或展具名称"
                      style="flex: 8"
                      min="0"
                      size="small"
                      maxlength="30"
                      class="enterpriseName_a"
                    />
                  </div>
                  <div style="margin-bottom: 10px;"> 
                    <el-input
                      v-model="item.limit"
                      @input="getCardLimitImg"
                      placeholder="请输入示意图张数"
                      type="number"
                      size="small"
                      maxlength="3"
                      min="0"
                      style="flex: 8"
                      class="enterpriseName_a"
                   />
                  </div>
                  <div style="margin-bottom: 10px;"> 
                    <el-input
                      v-model="item.orderNum"
                      @input="getOrdernum"
                      placeholder="请输入排列顺序"
                      type="number"
                      size="small"
                      maxlength="4"
                      min="0"
                      style="flex: 8"
                      class="enterpriseName_a"
                   />
                  </div>
                </div>
                  <!-- 图片模板示意上传区域 开始 -->
                  <div @click="checkIndex(index)">
                  <el-upload
                     v-model:file-list="item.cardUploadImg"
                     :http-request="selfUploadPic_card"
                     action="upUrl"
                     list-type="picture-card"
                     :on-change="OnChange"
                     :on-exceed="handleExceedCard"
                     :on-preview="handlePictureCardPreview_a"
                     :on-remove="handleRemoveCard"
                     :on-error='fileErrCard'
                   >
                  <el-icon><Plus /></el-icon>
                  </el-upload>
                <el-dialog v-model="state.dialogVisible_a">
                <!-- <img w-full :src="state.dialogImageUrl" alt="Preview Image" /> -->
                 <el-image :src="state.dialogImageUrl" :fit="contain" />
                </el-dialog>
                <!-- 删除按键 -->
                <div style="display:flex; justify-content: flex-end">
                  <div v-if="index != 0" class="delbtn" @click="delCard(index)">删除</div>
                </div>
               </div>
                </div>
                <!-- 结束 -->
                <div class="add_work" @click="goAddCard">
                    +
                  </div>
              </div>
              </div>
        </template>

        <div style="display: flex; margin-top: 15px">
          <div style="margin-top: 25px; flex: 2; font-weight: 600">简介文字配置</div>
          <div style="margin-top: 15px; flex: 8">
            <el-input
              v-model="state.textarea"
              autosize
              resize="none"
              :rows="12"
              type="textarea"
              placeholder="请输入文字"
              class="textTip"
            />
          </div>
        </div>

        <div style="display: flex; margin-top: 15px">
          <div style="margin: 10px 14px 10px 10px; font-weight: 600">工作流状态</div>
          <el-radio-group fill="#409eff" v-model="state.radioState" size="small">
            <el-radio-button label="启用" />
            <el-radio-button label="停用" />
          </el-radio-group>
        </div>
        <div style="display: flex; margin-top: 20px">
          <div class="work_c">
            工作流类型
          </div>
          <div class="workInput_d">
            <el-checkbox-group v-model="state.worktype" :max="1" fill="#409eff" @change="getworkTypeIdx">
              <el-checkbox v-for="(item, index) in state.workTypeList" :key="index" :label="item" name="worktype" />
            </el-checkbox-group>
          </div>
        </div>
        <div style="display: flex; margin-top: 20px">
          <div class="vestTit">
            归属列
          </div>
          <div class="workInput_e">
            <el-checkbox-group v-model="state.vestVal" :max="1" fill="#409eff" @change="getsiteIdx">
              <el-checkbox v-for="(item, index) in state.siteList" :key="index" :label="item" name="vestVal" />
            </el-checkbox-group>
          </div>
        </div>
        <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
          <div class="siteVest_a">
            站点归属列
          </div>
          <div class="workInput_f">
            <el-checkbox-group v-model="state.siteVest" :disabled="state.isshowVest" :max="1" fill="#409eff" @change="getsiteVestIdx">
              <el-checkbox v-for="(item, index) in state.siteVestList" :key="index" :label="item" name="siteVest" />
            </el-checkbox-group>
          </div>
        </div>

        <div style="display: flex; margin-top: 15px">
          <div class="work_b" style="margin-left: 7px; margin-right: -10px;">
            站点状态
          </div>
          <el-select v-model="state.site_stage" @change="getsiteStageModel" class="elSelect" size="default">
            <el-option
              v-for="item in state.stageMouldArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="display: flex; margin-top: 15px">
          <div style="margin: 10px 8px 11px 0px; font-weight: 600">是否需要审核</div>
          <el-radio-group fill="#409eff" v-model="state.need_check" size="small">
            <el-radio-button label="不需要" />
            <el-radio-button label="需要" />
          </el-radio-group>
        </div>

        <div style="display: flex; margin-top: 15px">
          <div style="margin: 10px 8px 11px 0px; font-weight: 600">是否推送邮件</div>
          <el-radio-group fill="#409eff" v-model="state.is_sent" size="small">
            <el-radio-button label="推送" />
            <el-radio-button label="不推送" />
          </el-radio-group>
        </div>
        <div style="display: flex; margin-top: 15px">
          <div style="margin: 10px 8px 11px 0px; font-weight: 600">客户运营呈现</div>
          <el-radio-group fill="#409eff" v-model="state.is_cust" size="small">
            <el-radio-button label="启用" />
            <el-radio-button label="停用" />
          </el-radio-group>
        </div>
        <div class="dialog-footer">
          <el-button size="small" @click="closeForm">
            取消
          </el-button>
          <el-button type="primary" size="small" @click="submitFrom">
            确认
          </el-button>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script setup>
import { toRefs, reactive, onMounted, computed, ref } from "vue";
import { ArrowDown, Plus } from "@element-plus/icons-vue";
import http from "../libs/http";
import axios from 'axios';
// var newImgArr = []     //上传成功后图片的全局对象
var uploadfileArr = []

const state = reactive({
  typeVal: "",
  rankVal: "",
  options: [
    {
      value: "展具物流到货",
      label: "展具物流到货",
    },
    {
      value: "卸货说明",
      label: "卸货说明",
    },
    {
      value: "立柱到位立正",
      label: "立柱到位立正",
    },
  ],
  optionsTwo: [
    {
      value: "B级",
      label: "B级",
    },
    {
      value: "C级",
      label: "C级",
    },
    {
      value: "E级",
      label: "E级",
    },
  ],
  mouldArr: [
    {
      value: 1,
      label: "模板一(项目简介)",
    },
    {
      value: 2,
      label: "模板二",
    },
    {
      value: 3,
      label: "模板三",
    },
    {
      value: 4,
      label: "模板四",
    },
    {
      value: 5,
      label: "模板五",
    },
    {
      value: 6,
      label: "模板六",
    },
    {
      value: 7,
      label: "模板七",
    },
    {
      value: 8,
      label: "模板八",
    },
    {
      value: 9,
      label: "模板九",
    },
    {
      value: 10,
      label: "模板十",
    },
    {
      value: 11,
      label: "模板十一",
    }
  ],
  stageMouldArr: [{
    value: 0,
    label: "不修改状态",
  },{
    value: 1,
    label: "制作中",
  },{
    value: 2,
    label: "物流中",
  },{
    value: 3,
    label: "搭建中",
  },{
    value: 4,
    label: "运营中",
  },{
    value: 5,
    label: "已结束",
  }],
  modelVal: "选择模板",
  tableData: [],
  showModel: false, //显示编辑弹窗
  dialogImageUrl: "",
  dialogVisible: false,
  dialogVisible_a: false,
  picTip: "建议宽高比16:9780*438<尺寸<2560*1440 格式:JPG/JPEG/PNG文件大小≤1000KB",
  uploadImgList: [],

  //需要提交的表单数据
  workName:"",
  workSort:"",
  uploadImg:[],
  mouldVal: "",
  modelValIdx:"",
  site_stage: "不修改状态",  //站点状态
  siteStageId: 0,
  worktype: [],
  vestVal: [],
  siteVest:[], 
  templateId:"",
  workSortVal:"",
  limitImg:"",
  radioState: "启用",
  is_cust: "启用",
  is_sent: '推送',
  need_check: "不需要",
  wid:"",

  workTypeList:['预设报告','预设可编辑标题报告','新增报告'],
  // siteList: ['站点', '展具', '竞品'],
  siteList: ['站点', '展具'],
  isshowVest: false,
  siteVestList: ['布店','巡店','撤店','总结'],
  workTypeIdx:"",
  siteIdx:"",
  siteVestIdx:"",
  textarea: "",
  statusVal:"",

  // 编辑显示的示意图
  uploadImg_a:'',
  uploadImgList_a:[],

  showProcess: false,  //进度条参数
  processLength: 0,

  // 模板十一使用数据
  cardlimitImg:'',
  cardTitle: '',
  cardList: [],   //渲染的列表数据
  cardUpLoadimg: [],
  checkCardidx: '', //上传图片知道选中的卡片
  onlyId: 10,    //卡片的唯一ID
  imgId: 200      //上传图片的id
});
// 显示图表逻辑
const search = ref("");
const filterTableData = computed(() =>
  state.tableData.filter(
    (data) =>
      !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);

// 编辑
const handleEdit = (index, row) => {
  // clearAllDate()
  state.showModel = true;
  let newRow = JSON.parse(JSON.stringify(row))
  console.log(newRow,'>>>>>>>>1111111111111');
  state.wid = newRow.wid
  state.workName = newRow.flowTitle
  state.workSortVal = newRow.workSortVal
  state.limitImg = newRow.limitImg
  state.mouldVal = newRow.model,
  state.site_stage = newRow.siteStage,
  state.modelValIdx = newRow.modelValIdx,
  state.siteStageId = newRow.siteStageId
  state.uploadImgList_a = newRow.srcList, //放大图
  state.uploadImg_a = newRow.expImg,   //示例图
  state.textarea = newRow.textarea,
  state.radioState = newRow.workStatus,
  state.is_cust = newRow.workCust,
  state.is_sent = newRow.workSent,   //是否推送邮箱
  state.need_check = newRow.needCheck,
  state.workTypeIdx = newRow.workTypeIdx,
  state.siteVestIdx = newRow.siteVestIdx,
  state.siteIdx = newRow.siteIdx,
  state.worktype = newRow.worktype,
  state.vestVal = newRow.vestVal,
  state.siteVest = newRow.siteVest

  // 回显模板11的数据
  if (newRow.modelValIdx == 11) {
    let cardUpLoadimgStr_b = JSON.parse(JSON.stringify(state.cardUpLoadimg))
    let newcardUpLoadimgStr_b = []
    newRow.expImg.map((n, m) => {
      n.cardUploadImg.map((j, y) => {
        newcardUpLoadimgStr_b[m] += j.url + ','
      })
    })
    // 去掉字符串中不必要字符
    let newStr_b = []
    newcardUpLoadimgStr_b.map((i, g) => {
      console.log(typeof(i),'>>>>><<<<<<<<<<',g,'----------')
      newStr_b[g] = i.replace('undefined','').slice(0, -1)
    })

    console.log(newRow.expImg,'>>>>>>>>>>>>>>>>>>回显的数据这个数据要重新组装', newStr_b, '>>>>>>>>>>>选中的卡片下标')
    // 查询最大的id值
    let result = Math.max(...newRow.expImg.map(x => x.Lid));
    console.log(result,'.>>>>>>>>>最终结果')

    // 查询图片最大id值
    let imgNumList = []
    newRow.expImg.map((c, v) => {
      imgNumList.push(c.exampleArr)
    })
    let imgNumRes = imgNumList.flatMap(item => item);
    let resimgNumRes_max = Math.max(...imgNumRes.map(x => x.Lid));
    console.log(resimgNumRes_max,'>>>>>>>>>>>最大值')

    state.imgId = resimgNumRes_max
    state.onlyId = result

    state.cardUpLoadimg =  newStr_b 
    state.cardList = newRow.expImg
  }


  // 需要循环遍历出新的数组, 用于上传的图片回显
  state.uploadImgList = newRow.reImgList
  // 原先有图片要返回数组先
  state.uploadImg = newRow.srcList
};
// 删除
const handleDelete = (index, row) => {
  console.log(index, row);
};

// 多选和单选的逻辑
const multipleTableRef = ref();
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(val, ">>>>>>>>>>>所有选中项");
};

// 分页显示逻辑
const currentPage4 = ref(4);
const pageSize4 = ref(5);
const small = ref(false);
const disabled = ref(false);

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};

// 数据初始化
onMounted(() => {
  getWorkitemsList();
});

// 初始化渲染列表数据
const getWorkitemsList = async () => {
  let newTableList = []
  let param = {
    openid: localStorage.getItem("openid"),
  };
  const res = await http.$get("/apies/backend/getWorkitemsList", param);
  if (res.code == 200) {
    let workList = res.data
    console.log(workList,'>>>>>>>>>>>>')
    workList.map( i =>{
      
      // 处理多图上传的
      let newSrclist = []
      let newBigSrc = []
      if(i.exampleimage != '' && i.templateid == 11) {
         console.log('>>>>>>>>>>卡片上传图片')
      } else {
        // console.log(i.exampleimage == null, '判断是否为null的情况>>>>',i.exampleimage )
        if (!(i.exampleimage == null)) {
          i.exampleimage.map( (j, k) => {
          newSrclist.push({
            name:`${k}_img.jpg`,
            url: j.image
          })
          newBigSrc.push(j.image)
        }) 
        }
      }
      let tempImg
      // console.log(newSrclist,'>>>>>>>>>>>>>>>>重新构建的上传数组')
      if (i.templateid != 11 && !(i.exampleimage == null)) {
         tempImg = i.exampleimage.length == 0 ? "" : i.exampleimage[0].thumb 
      } else {
        // console.log( '>>>>>>>>>>>>是否存在orderNum参数值++++++++', i.exampleimage)
      }

      if(i.templateid != 11 && !(i.exampleimage == null)) {
        // console.log('>>>>>>>>>>>>卡片数据',JSON.parse(JSON.stringify(i.exampleimage)))  
      }

      newTableList.push({
        wid: i.wid,
        flowTitle: i.name,
        blongtype:i.table_level == 1 ? "站点" : i.table_level == 2 ? "展具" : i.table_level == 3 ? "竞品" : "",
        // expImg:i.exampleimage.length == 0 ? "" : i.exampleimage[0].thumb,
        expImg: i.templateid != 11 ? tempImg : JSON.parse(JSON.stringify(i.exampleimage)),
        srcList: newBigSrc,
        reImgList: newSrclist,
        model:i.templateid == 1 ? "模板一" : i.templateid == 2 ? "模板二" : i.templateid == 3 ? "模板三" : i.templateid == 4 ? "模板四" : i.templateid == 5 ? "模板五" : i.templateid == 6 ? "模板六" : i.templateid == 7 ? "模板七" : i.templateid == 8 ? "模板八" : i.templateid == 9 ? "模板九" : i.templateid == 10 ? "模板十" : i.templateid == 11 ? "模板十一" : "" ,
        siteStage:i.site_stage == 0 ? "不修改状态" : i.site_stage == 1 ? "制作中" : i.site_stage == 2 ? "物流中" : i.site_stage == 3 ? "搭建中" : i.site_stage == 4 ? "运营中" : i.site_stage == 5 ? "已结束" : "",
        workStatus:i.status == 0 ? "停用" : i.status == 1 ? "启用" : "",
        workCust:i.is_cust == 0 ? "停用" : i.is_cust == 1 ? "启用" : "",
        workSent: i.is_sent == 0 ? "不推送" : i.is_sent == 1 ? "推送" : "",
        needCheck: i.need_check == 0 ? "不需要" : i.need_check == 1 ? "需要" : "",

        workName: i.name,
        workSortVal: i.sort_order,
        limitImg : i.limit,
        modelValIdx : i.templateid,
        siteStageId : i.site_stage,
        textarea : i.intro,
        workTypeIdx : i.type,
        siteVestIdx : i.type_status,
        siteIdx : i.table_level,
        worktype : [state.workTypeList[i.type - 1]],
        vestVal : [state.siteList[i.table_level - 1]],
        siteVest : [state.siteVestList[i.type_status - 1]]
      })
    })
    console.log('>>>>>>>>>>>>>拿到重新组装的数据', newTableList)
    state.tableData = newTableList
  } else {
    console.log('>>>>>>列表数据获取失败！')
  }
}

 
// ---------上传图片开始------------
const beforeUpload = (file, uploadFile) => {
  console.log('>>>>>>>上传的图片数组', uploadFile)
  // 获取文件对象
  let isJPG; 
  //判断图片类型
  if (
    file.type == "image/jpeg" ||
    file.type == "image/png" ||
    file.type == "image/JPG"
  ) {
    isJPG = true;
  } else {
    isJPG = false;
  }
  // 判断图片大小
  const isLt7M = file.size / 1024 / 1024 < 4 //上传文件小于4MB
  if (!isJPG) {
    ElMessage.error("图片建议是 JPG/PNG/JPEG 格式!");
    uploadFile.splice(uploadFile.indexOf(file),1)
    return false
  }
  if (!isLt7M) {
    ElMessage.error("图片大小不能超过 4MB!");
    uploadFile.splice(uploadFile.indexOf(file),1)
    console.log(uploadFile,'>>>>>>>')
    return false
  }
};
// 自定义上传图片逻辑
const selfUploadPic = (options) => {
  //打开上传加载loading动画
  /***
   *  目前步骤：
      1.多图点击上传的时候, 打开加载弹窗,并提示加载进度
      2.全部加载成功后，提示用户已上传完毕,关闭加载框
   * */ 
   console.log(state.uploadImgList,'>>>>>>>>>>>当前-------图片数组')
   const loadingInstance = ElLoading.service({
    text: `正在上传中,请稍等...`,
   }) 

  // 重新上传要重新清除原有数组
  // state.uploadImg = []
  let file = options.file
  if (beforeUpload(file, state.uploadImgList) == undefined) { 
    uploadfileArr.push(file)
    console.log(uploadfileArr,'>>>>>>>>>>>>>>>>>需要上传的所有二进制格式的图片')
    // goUploadImg(uploadfileArr)
    
    // trycatch处理接口请求超时的异常处理
    try {
      let formData = new FormData();
        formData.append('openid', localStorage.getItem("openid"));
        formData.append('img', file);
    
        console.log(formData,'>>>>>>>>>>>需要传递的参数')
      axios.post('/apies/v2/uploadImage', formData)
        .then(res => {
            console.log(res.data,'>>>>>>>>>上传成功')
            let resAxios = res.data
            if (resAxios.code == 200) {
                // newImgArr.push(resImg.data.img)
            state.uploadImg.push(resAxios.data.img)
            // 重新上传的时候这两个值uploadImgList uploadImg的数据要更新
            let newImglist = JSON.parse(JSON.stringify(state.uploadImgList))
            let newUpImg = state.uploadImg
            let newArrList = []
            newImglist.map((i, y) => {
              newArrList.push({
                name: i.name,
                url: newUpImg[y]
              }) 
            })
            console.log(newArrList,'>>>>>>>>>>>>>>回显和上传后台的数据', newUpImg)
            state.uploadImgList = newArrList
            let isUndefined = []
            JSON.parse(JSON.stringify(state.uploadImgList)).map(n => {
              isUndefined.push(n.url)
            })
            // 记录上传的张数
            console.log(isUndefined.indexOf(undefined),'>>>>>>>>>11111111111122222222')
              if (isUndefined.indexOf(undefined) >= 0) {
                console.log('>>>>>>>>还没上传完')
              } else {
                ElMessage({
                  message: `图片都已上传成功！`,
                  type: 'success',
               })
                console.log('上传完了')
                loadingInstance.close()
              }
            
            console.log(state.uploadImgList,'>>>>>>>>>>>当前上传-------图片数组')
            } else {
              ElMessage.error(`图片上传失败，请重新上传!`);
              loadingInstance.close()
            }
        })
        .catch(err => {
          // 上传失败
          // ElMessage.error(`上传失败，请重新上传!`);
          console.log("图片上传失败了>>>>>>>>>>")
          ElMessage.error(`有图片上传失败，请重新上传!`);
          loadingInstance.close()
        })
    } catch (error) {
      console.log(error,'>>>>>>>>>>>>出现异常报错了')
      // ElMessage.error(`有图片上传失败，请重新上传!`);
      loadingInstance.close()
    }
    
    //图片文件转base64
    // getBase64(file).then(async (res) => {
      //  let baseVal = JSON.parse(JSON.stringify(res))
      //  base64ToFile(baseVal, res => {
      //   console.log(res.name, ">>>>>>>>拿到多张图片file格式了", res);
      //   uploadfileArr.push(res)
      //   goUploadImg(uploadfileArr)
      //  })

      //请求接口数据
      // let newImgArr = []
      // const param = {
      //   openid: localStorage.getItem("openid"),
      //   img: JSON.parse(JSON.stringify(res))
      // }
      // const resImg = await http.$post("/apies/uploadImage", param);
      // if (resImg.code == 200) {
      //   console.log(resImg.data,'>>>>>>>>>>>>>>>>上传成功了')
      //   // newImgArr.push(resImg.data.img)
      //   state.uploadImg.push(resImg.data.img)
      //   // 重新上传的时候这两个值uploadImgList uploadImg的数据要更新
      //   let newImglist = JSON.parse(JSON.stringify(state.uploadImgList))
      //   let newUpImg = state.uploadImg
      //   let newArrList = []
      //   newImglist.map((i, y) => {
      //     newArrList.push({
      //         name: i.name,
      //         url: newUpImg[y]
      //     })
      //   })
      //   console.log(newArrList,'>>>>>>>>>>>>>>回显和上传后台的数据', newUpImg)
      //   state.uploadImgList = newArrList
      //   ElMessage({
      //     message: '图片上传成功！',
      //     type: 'success',
      //   })
      // } else {
      //   ElMessage.error("上传失败请重新上传!");
      // }
    // });
  } else {
    console.log('>>>>>>>>>>>图片格式不正确') 
  }
};
// 上传文件超出限制个数
const handleExceed = () => {
  ElMessage.error("已超过上传最大张数");
};

// base64转成file文件格式
const base64ToFile = (data, callback) => {
    let base = window.atob(data.substring(data.indexOf(',') + 1))
    let length = base.length
    let url = new Uint8Array(length)
    while (length--) {
        url[length] = base.charCodeAt(length)
    }
    let file = new File([url], `${new Date().getTime()}.jpg`, {
        type: 'image/jpg'
    })
    callback(file)
}

// 循环请求上传图片接口数据
const goUploadImg = async (fileVal) => {
  // JSON.parse(JSON.stringify(fileVal[i]))
  console.log(fileVal, '>>>>>>>>>>>>>>>需要循环上传的数组')
  for (let i = 0; i < fileVal.length; i++) {
   console.log(fileVal[i], '>>>>>>>>>>>>>>>需要循环上传的数组')
    let formData = new FormData();
        formData.append('openid', localStorage.getItem("openid"));
        formData.append('img', fileVal[i]);

      console.log(formData,'>>>>>>>>>>>需要传递的参数')
      axios.post('/apies/v2/uploadImage', formData)
        .then(res => {
            console.log(res.data,'>>>>>>>>>上传成功')
            let resAxios = res.data
            if (resAxios.code == 200) {
                // newImgArr.push(resImg.data.img)
            state.uploadImg.push(resAxios.data.img)
            // 重新上传的时候这两个值uploadImgList uploadImg的数据要更新
            let newImglist = JSON.parse(JSON.stringify(state.uploadImgList))
            let newUpImg = state.uploadImg
            let newArrList = []
            newImglist.map((i, y) => {
              newArrList.push({
                name: i.name,
                url: newUpImg[y]
              }) 
            })
            console.log(newArrList,'>>>>>>>>>>>>>>回显和上传后台的数据', newUpImg)
            state.uploadImgList = newArrList
            ElMessage({
              message: `第${i + 1}张图片上传成功！`,
              type: 'success',
            })

            if(i == fileVal.length - 1) {
             uploadfileArr = []
            }
            console.log(uploadfileArr,'>>>>>>>>所有需要上传的图片')

            } else {
              ElMessage.error(`第${i + 1}张上传失败，请重新上传!`);
            }
        })
        .catch(err => {
          // 上传失败
          ElMessage.error(`第${i + 1}张上传失败，请重新上传!`);
        })

      // const resImg = await http.$post("apies/v2/uploadImage", formData);
      // if (resImg.code == 200) {
      //   console.log(resImg.data,'>>>>>>>>>>>>>>>>上传成功了')
      //   // newImgArr.push(resImg.data.img)
      //   state.uploadImg.push(resImg.data.img)
      //   // 重新上传的时候这两个值uploadImgList uploadImg的数据要更新
      //   let newImglist = JSON.parse(JSON.stringify(state.uploadImgList))
      //   let newUpImg = state.uploadImg
      //   let newArrList = []
      //   newImglist.map((i, y) => {
      //     newArrList.push({
      //         name: i.name,
      //         url: newUpImg[y]
      //     })
      //   })
      //   console.log(newArrList,'>>>>>>>>>>>>>>回显和上传后台的数据', newUpImg)
      //   state.uploadImgList = newArrList
      //   ElMessage({
      //     message: '图片上传成功！',
      //     type: 'success',
      //   })
      // } else {
      //   ElMessage.error("上传失败请重新上传!");
      // }
  }
}  


// 检查文件上传进度和文件变化,添加进度条显示
const OnChange = (file, fileList) => {
  console.log(file, fileList, '>>>>>>>>>>>>>>>>>>上传')
  // if (file.status === 'ready') {
  //   state.processLength = 0
  //   state.showProcess = true
  //   const interval = setInterval(() => {
  //     if (state.processLength >= 99) {
  //       clearInterval(interval)
  //       return
  //     }
  //     state.processLength += 1
  //   }, 20)
  // }
  // if (file.state === 'success') {
  //   state.processLength = 100
  //   state.showProcess = false
  // }
};

// 上传失败的图片
const fileErr = (err, file, fileList) => {
  console.log(file,'>>>>>>>>>>>>>>>>>>>>这里是上传失败的图片')
  ElMessage.error("部分图片上传失败");
}


// 删除上传图片
const handleRemove = (uploadFile, uploadFiles) => {
  // 删除的图片
  let delUploadimg = JSON.parse(JSON.stringify(uploadFile))
  // 删除后的数组  
  let newArrUpload = JSON.parse(JSON.stringify(uploadFiles))

  // 这两个数据删除后, 都要重新更新数据
  console.log( state.uploadImg ,'>>>>>>>>>>>原本数组的所有数据', state.uploadImgList)
  console.log( delUploadimg , '>>>>>>>>>>>>>>>>>删掉图片', newArrUpload);
  let newUplist = state.uploadImg.filter(i => i != delUploadimg.url)
  console.log(newUplist,'重组的数组>>>>>>>=======')
  state.uploadImg = newUplist
  // state.uploadImg = []
};
// 预览图片
const handlePictureCardPreview = (uploadFile) => {
  console.log(">>>>>>>>预览显示的图片", uploadFile.url);
  state.dialogImageUrl = uploadFile.url;
  state.dialogVisible = true;
};

// 图片文件转base64
const getBase64 = (file) => {
  // 直接将处理结果返回
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    let fileResult = "";
    reader.readAsDataURL(file);
    reader.onload = () => {
      fileResult = reader.result.toString();
    };
    reader.onerror = (error) => {
      reject(error);
    };
    reader.onloadend = () => {
      resolve(fileResult);
    };
  });
};

// ------------结束-----------

// 查询按钮
const onCheckList = () => {
  console.log( state.typeVal ,'>>>>>>>>>>>>>>>>>>>>点击了查询按钮了咯啦啦啦啦啦啦啦', state.rankVal)
}
//删除按钮
const onDelectList = () => {
  console.log( state.typeVal ,'>>>>>>>>>>>>>>>>>>>>点击删除按钮了乐乐乐乐乐乐', state.rankVal)
}
// 增加列表项
const addListItem = () => {
  // 显示出弹窗
  state.showModel = true
  state.wid = ""
  clearAllDate()

  // -------要初始化卡片列表数据-------
  // 初始化列表id值
  state.onlyId = 10
  state.imgId = 200
  state.cardUpLoadimg = []
  state.cardList = [{
    Lid: state.onlyId,
    title: '',
    limit: '',
    orderNum: '',
    cardUploadImg: [],
    exampleArr: []
  }]
}

//获取站点活动状态
const getsiteStageModel = (e) => {
  console.log('>>>>>>>>>>>>>>活动状态', e)
  state.siteStageId = e
}

// 获取工作流模板
const getSelModel = (e) => {
  console.log(e,'>>>>>>>模板')
  state.modelValIdx = e
  // 判断是否选择了模板十一，隐藏上传图片和数量的模块，新增卡片模块
}

// 获取工作流类型
const getworkTypeIdx = (e) => {
  console.log(e,'>>>>>>>类型')
  let workType_new = ""
  state.workTypeList.map((item, index) => {
    if (item == e) {
      workType_new = index + 1
    }
  })
  console.log('拿到选择项了', workType_new)
  state.workTypeIdx = workType_new
}
// 归属列
const getsiteIdx = (e) => {
  console.log(e,'>>>>>>>>归属列')
  let siteValnew = ""

  state.siteList.map((item, index) => {
    if (item == e) {
      siteValnew = index + 1
    }
  })
  state.siteIdx = siteValnew
  if (siteValnew != 1) {
    console.log(siteValnew,'<<<<<<<拿到选项值')
    state.isshowVest = true
    state.siteVestIdx = 1
  } else {
    state.isshowVest = false
    state.siteVestIdx = ""
  }

   //当重新选到站点要给个默认值
   if (e == "站点") {
    state.siteVestIdx = 1
  }
}
// 站点归属列
const getsiteVestIdx = (e) => {
  console.log(e,'>>>>>>>>站点归属列')
  let siteVest_new = ""
  state.siteVestList.map((item, index) => {
    if (item == e) {
      siteVest_new = index + 1
    }
  })
  console.log(siteVest_new,'>>>>>>>>>>拿到站点归属列值')
  state.siteVestIdx = siteVest_new
}

// 解决图片放大报错
const imageErr = (img, imgList) => {
  console.log(img, imgList)
}

// 新加功能卡片图片上传功能 和 示例图上传功能------开始------

const getCardtTitle = (e) => {
  let jsondata = JSON.parse(JSON.stringify(state.cardList))
  state.cardList = jsondata
  console.log('>>>>>>>>>数据更新了', state.cardList)
}
const getCardLimitImg = (e) => {
  let jsondata_a = JSON.parse(JSON.stringify(state.cardList))
  state.cardList = jsondata_a
  console.log('>>>>>>>>>数据更新了', state.cardList)
}
const getOrdernum = (e) => {
  let jsondata_b = JSON.parse(JSON.stringify(state.cardList))
  state.cardList = jsondata_b
  console.log('>>>>>>>>>数据更新了', state.cardList)
}

// 增加卡片
const goAddCard = () => {
  let newCardList = JSON.parse(JSON.stringify(state.cardList))
  state.onlyId++
  let cardObj = {
    Lid: state.onlyId,
    title: '',
    limit: '',
    orderNum: '',
    cardUploadImg: [],
    exampleArr: []
  }
  newCardList.push(cardObj)
  state.cardList = newCardList
  console.log('>>>>>>>>>>新加卡片功能',newCardList)
}
//删除卡片
const delCard = (e) => {
  console.log('>>>>>>删除列表中的选中项',e)
  if(e == 0) return
  state.cardList.splice(e, 1)
  let cardUpLoadimgStr_a = JSON.parse(JSON.stringify(state.cardUpLoadimg))
  console.log("删除后的图片字符串>>>>>>",cardUpLoadimgStr_a)
  cardUpLoadimgStr_a.splice(e, 1)
  state.cardUpLoadimg = cardUpLoadimgStr_a
}

// 检查选中的下标
const checkIndex = (e) => {
  console.log('>>>>>>>>>>>>当前选中是那个卡片',e)
  state.checkCardidx = e
}
// 图片上传
const selfUploadPic_card = (options) => {
  //打开上传加载loading动画
  /***
   *  目前步骤：
      1.多图点击上传的时候, 打开加载弹窗,并提示加载进度
      2.全部加载成功后，提示用户已上传完毕,关闭加载框
   * */ 
  //  console.log(state.uploadImgList,'>>>>>>>>>>>当前-------图片数组')
   const loadingInstance = ElLoading.service({
    text: `正在上传中,请稍等...`,
   }) 

  // 重新上传要重新清除原有数组
  // state.uploadImg = []
  let file = options.file
  if (beforeUpload(file, state.cardList[state.checkCardidx].cardUploadImg) == undefined) { 
    uploadfileArr.push(file)
    console.log(uploadfileArr,'>>>>>>>>>>>>>>>>>需要上传的所有二进制格式的图片')
    // goUploadImg(uploadfileArr)
    
    // trycatch处理接口请求超时的异常处理
    try {
      let formData = new FormData();
        formData.append('openid', localStorage.getItem("openid"));
        formData.append('img', file);
    
        console.log(formData,'>>>>>>>>>>>需要传递的参数')
      axios.post('/apies/v2/uploadImage', formData)
        .then(res => {
            console.log(res.data,'>>>>>>>>>上传成功')
            let resAxios = res.data
            state.imgId++
            // 定义一个初始化数据
            let addObj = {
                Lid: state.imgId,
                exampleImg:'',
                uploadImg: {
					         smallImg: '',
					         bigImg: ''
				        }
              }
            let jsonCardList = JSON.parse(JSON.stringify(state.cardList))
            jsonCardList[state.checkCardidx].exampleArr.push(addObj)
            if (resAxios.code == 200) {
              //拿到上传的数据
              //上传成功的图片进制的，地址要重新转为线上地址，才能进行删除和增加
              console.log(resAxios.data.img,'>>>>>>>>>>>>>返回回来的数据',JSON.parse(JSON.stringify(state.cardList)))
              state.cardUpLoadimg[state.checkCardidx] = state.cardUpLoadimg[state.checkCardidx] != undefined ? (state.cardUpLoadimg[state.checkCardidx] == '' ? state.cardUpLoadimg[state.checkCardidx]  : (state.cardUpLoadimg[state.checkCardidx] + ',')) + resAxios.data.img : resAxios.data.img
              console.log(state.cardUpLoadimg,'>>>>>>>')
              let newcardUpLoadimg = JSON.parse(JSON.stringify(state.cardUpLoadimg))
              console.log(newcardUpLoadimg,'>>>>>>>>>>>>>>>上传后的文件数据')
              newcardUpLoadimg.map((i, y) => {
                i.split(',').map((j, k) => {
                  jsonCardList[y].cardUploadImg[k].url = j
                  jsonCardList[y].exampleArr[k].exampleImg = j
                  console.log(j, y,'---------',jsonCardList[y].exampleArr[k].exampleImg)
                })
              })
              console.log('>>>>>>>>重组后的数据', jsonCardList)
              
              state.cardList = jsonCardList

              console.log(newcardUpLoadimg,'>>>>>>>>>>>>>>>上传后的文件数据')
              // let cardList_c = JSON.parse(JSON.stringify(state.cardList))
              // cardList_c[state.checkCardidx].cardUploadImg = state.cardUpLoadimg[state.checkCardidx]
              // state.cardList = cardList_c

              // let compCardList = JSON.parse(JSON.stringify(state.cardList))
              

              loadingInstance.close()
            // state.uploadImg.push(resAxios.data.img)
            // // 重新上传的时候这两个值uploadImgList uploadImg的数据要更新
            // let newUpImg = state.uploadImg
            // let newArrList = []
            // newImglist.map((i, y) => {
            //   newArrList.push({
            //     name: i.name,
            //     url: newUpImg[y]
            //   }) 
            // })
            // console.log(newArrList,'>>>>>>>>>>>>>>回显和上传后台的数据', newUpImg)
            // state.uploadImgList = newArrList
            // let isUndefined = []
            // JSON.parse(JSON.stringify(state.uploadImgList)).map(n => {
            //   isUndefined.push(n.url)
            // })
            // // 记录上传的张数
            // console.log(isUndefined.indexOf(undefined),'>>>>>>>>>11111111111122222222')
            //   if (isUndefined.indexOf(undefined) >= 0) {
            //     console.log('>>>>>>>>还没上传完')
            //   } else {
            //     ElMessage({
            //       message: `图片都已上传成功！`,
            //       type: 'success',
            //    })
            //     console.log('上传完了')
            //     loadingInstance.close()
            //   }
            
            // console.log(state.uploadImgList,'>>>>>>>>>>>当前上传-------图片数组')
            } else {
              ElMessage.error(`图片上传失败，请重新上传!`);
              loadingInstance.close()
            }
        })
        .catch(err => {
          // 上传失败
          // ElMessage.error(`上传失败，请重新上传!`);
          console.log("图片上传失败了>>>>>>>>>>")
          // ElMessage.error(`有图片上传失败，请重新上传!`);
          loadingInstance.close()
        })
    } catch (error) {
      console.log(error,'>>>>>>>>>>>>出现异常报错了')
      // ElMessage.error(`有图片上传失败，请重新上传!`);
      loadingInstance.close()
    }
  } else {
    console.log('>>>>>>>>>>>图片格式不正确')
    loadingInstance.close()
  }
};
// 上传张数
const handleExceedCard = () => {
  ElMessage.error("已超过上传最大张数");
};
// 预览图片
const handlePictureCardPreview_a = (uploadFile) => {
  console.log(">>>>>>>>预览显示的图片", uploadFile.url);
  state.dialogImageUrl = uploadFile.url;
  state.dialogVisible_a = true;
};
// 删除上传图片
const handleRemoveCard = (uploadFile, uploadFiles) => {
  setTimeout(() => {
     // 删除的图片
     let delUploadimg = JSON.parse(JSON.stringify(uploadFile))
     // 删除后的数组 都要重新更新数据 
     let newArrUpload = JSON.parse(JSON.stringify(uploadFiles))
     console.log(delUploadimg,'>>>>>>>>>>删除的图片',newArrUpload, '>>>>>>>>>删除后数组')
     let updateList = JSON.parse(JSON.stringify(state.cardList))
     let cardUpLoadimgStr = JSON.parse(JSON.stringify(state.cardUpLoadimg))
     let delIdx = ''
     let strIdx = ''
     console.log(updateList, '--++整个大数组', state.checkCardidx)
     updateList[state.checkCardidx].cardUploadImg = newArrUpload
     updateList[state.checkCardidx].exampleArr.map((n, m) => {
       if (n.exampleImg == delUploadimg.url) {
        delIdx = m
       }
     })
     updateList[state.checkCardidx].exampleArr.splice(delIdx, 1)
     console.log(updateList, '>>>>>>>>>删除后更改的数据')
     cardUpLoadimgStr[state.checkCardidx].split(',').map((i, j)=> {
      console.log(i,'>>?>>>>>>>>>>>>图片字符串')
      if ( i == delUploadimg.url) {
        strIdx = j
      }
     })
     let newcardUpLoadimgStr = cardUpLoadimgStr[state.checkCardidx].split(',')
     newcardUpLoadimgStr.splice(strIdx, 1)

     cardUpLoadimgStr[state.checkCardidx] = newcardUpLoadimgStr.join()
     console.log(newcardUpLoadimgStr.join(),'>+++++++++++,这个数据也要实时更新',cardUpLoadimgStr,'>>>>>>>>>>>到时回显数也要重组再更新')

    //  let filtecardUpLoadimgStr = cardUpLoadimgStr.filter(function(item) {
    //       return item.trim() !== ""; // 使用trim()移除空白字符并比较
    //  });
    //  console.log('>>>>>>>过滤后的数据',filtecardUpLoadimgStr)

     state.cardUpLoadimg = cardUpLoadimgStr
     state.cardList = updateList
  }, 500)
  // state.uploadImg = []
};
// 上传失败的图片
const fileErrCard = (err, file, fileList) => {
  console.log(file,'>>>>>>>>>>>>>>>>>>>>这里是上传失败的图片')
  ElMessage.error("部分图片上传失败");
}

// ------结束------

// 清空所有数据
const clearAllDate = () => {
  state.workName = ""
  state.workSortVal = ""
  state.limitImg = ""
  state.mouldVal = "",
  state.site_stage = "不修改状态",
  state.modelValIdx = "",
  state.siteStageId = 0,
  state.uploadImgList = [],
  state.uploadImg = [],
  state.textarea = "",
  state.radioState = "启用",
  state.is_cust = "启用",
  state.is_sent = "推送"
  state.need_check = "不需要"
  state.workTypeIdx = "",
  state.siteVestIdx = "",
  state.siteIdx = "",
  state.worktype = [],
  state.vestVal = [],
  state.siteVest = [],
  state.cardList = []
}
// 判断是否有空项
const hasEmptyValues = (array) => {
  return array.some(obj => Object.values(obj).some(value => value === ''));
}
const isKongDate = () => {
  if (state.modelValIdx != 11) {
    if (state.workName == "" || state.workSortVal == "" || state.limitImg == "" || state.mouldVal == "" || state.textarea == "" || state.worktype.length == 0 ||  state.vestVal.length == 0 || state.siteVestIdx == "") {
      return false
    } else {
      return true
    } 
  } else {
    let objIsKong = JSON.parse(JSON.stringify(state.cardList))
    console.log(objIsKong,'>>>>>>>>判空处理',hasEmptyValues(objIsKong),'数组对象中是否有空值')
    if (hasEmptyValues(objIsKong)) {
      return false
    }
    // objIsKong.map(i => {
    //   if(i.limit == '' || i.title == '' || i.exampleArr.length == 0) {
    //     return false
    //   }
    // })
    if (state.workName == "" || state.workSortVal == "" || state.mouldVal == "" || state.textarea == "" || state.worktype.length == 0 ||  state.vestVal.length == 0 || state.siteVestIdx == "") {
      return false
    } else {
      return true
    } 
  }
}

const addDefaultProperty = (arr, defaultProp) => {
  return arr.map(item => ({ ...item, ...defaultProp }));
}

// 表单的数据并进行提交
const submitFrom = async () => {
 if (isKongDate()) {
  if (state.uploadImg.length < state.uploadImgList.length) {
    ElMessage({
      message: '图片正在上传中，请稍等...',
      type: 'warning',
    })
    return
  }
  console.log('>>>>>>准备提交表单了')
  let wid = state.wid == "" ? 0 : state.wid
  let newUploadImg = JSON.parse(JSON.stringify(state.uploadImg))
  let newCardListJson = JSON.parse(JSON.stringify(state.cardList))
  // 提交的卡片列表数据,添加一个默认属性默认值,临时用的
  // let updatedArray = addDefaultProperty(newCardListJson, { orderNum: '300' });
  // console.log(updatedArray, '提交的卡片列表数据,添加一个默认属性默认值,临时用的')
  // 数组要进行升序排列
  newCardListJson.sort((a, b) => {
    return a.orderNum - b.orderNum
  })
  console.log('>>>>>>>>>>>>>>从小到大排列', newCardListJson)

  let param
  if (state.modelValIdx != 11) {
      param = {
        openid: localStorage.getItem("openid"),
        name: state.workName,
        sort_order:Number(state.workSortVal),  //排序
        limit: Number(state.limitImg),
        templateid:state.modelValIdx,    //模板
        site_stage: state.siteStageId,   //活动状态
        exampleimage: newUploadImg.join(","),
        intros:state.textarea,
        status:state.radioState == "启用" ? 1 : state.radioState == "停用" ? 0 : '',
        is_cust: state.is_cust == "启用" ? 1 : state.is_cust == "停用" ? 0 : '',
        is_sent: state.is_sent == "推送" ? 1 : state.is_sent == "不推送" ? 0 : '',
        need_check: state.need_check == "需要" ? 1 : state.need_check == "不需要" ? 0 : '',
        type:state.workTypeIdx,    //工作流类型
        type_status:state.siteVestIdx,  //站点归属列
        table_level:state.siteIdx,   //归属列
        wid:wid
      }
  } else {
    param = {
        openid: localStorage.getItem("openid"),
        name: state.workName,
        sort_order:Number(state.workSortVal),  //排序
        limit: Number(state.limitImg),
        templateid:state.modelValIdx,    //模板
        site_stage: state.siteStageId,   //活动状态
        exampleimage: newUploadImg.join(","),
        intros:state.textarea,
        status:state.radioState == "启用" ? 1 : state.radioState == "停用" ? 0 : '',
        is_cust: state.is_cust == "启用" ? 1 : state.is_cust == "停用" ? 0 : '',
        is_sent: state.is_sent == "推送" ? 1 : state.is_sent == "不推送" ? 0 : '',
        need_check: state.need_check == "需要" ? 1 : state.need_check == "不需要" ? 0 : '',
        type:state.workTypeIdx,    //工作流类型
        type_status:state.siteVestIdx,  //站点归属列
        table_level:state.siteIdx,   //归属列
        wid:wid,
        template_list: JSON.stringify(newCardListJson)
      }
  }
  // 需要传递的参数,请求接口参数
  console.log('>>>>>>>>>>接口需要提交的参数值', param)
  const res = await http.$post("/apies/backend/editWorkitem", param);
  if (res.code == 200) {
      getWorkitemsList();
      state.showModel = false;
      state.wid == "" ? ElMessage({
        message: '创建成功',
        type: 'success',
      }) : ElMessage({
        message: '编辑成功',
        type: 'success', 
      })
  } else {
    state.wid == "" ? ElMessage('创建失败！') : ElMessage('编辑失败！')
    state.showModel = false;
  }
 } else {
  ElMessage('填空项不能为空!')
 }
} 

const closeModelEvel = () => {
  console.log('>>>>>>>弹窗关闭啦啦啦啦啦')
  // newImgArr = []
}
// 关闭按钮, 需要清空所有数据
const closeForm = () => {
  console.log('>>>>>>>>>>>关闭弹窗了')
  // newImgArr = []
  state.showModel = false
}


</script>

<style scoped>
.Title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 20px;
}

.flewbtn {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.elSelect_a {
  border-radius: 15px;
  width: 250px;
  margin-right: 15px;
}
::v-deep .elSelect_a .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

.elSelect {
  border-radius: 15px;
  width: 250px;
  /* height: 28px; */
  flex: 8;
}
::v-deep .elSelect .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

::v-deep .elSelect .el-input__wrapper:focus {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
  color: #c0c4cc;
}

::v-deep .elSelect .el-input__inner {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  box-shadow: none;
  padding: 0;
}

/* 改变输入框样式 */
::v-deep .enterpriseName .el-input__inner {
  /* width:100%; */
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 25px;
  border-radius: 3px;
}

.enterpriseName ::v-deep .el-input__inner {
  border: none;
}

::v-deep .enterpriseName .el-input__wrapper {
  padding: 0;
}

/* 改变上传按钮样式 */
::v-deep.el-upload--picture-card,
::v-deep .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 110px;
  border: none;
  background: #fff;
}

/* 改变选择器样式 */
::v-deep .Selectbox .el-input__wrapper {
  /* width:100%; */
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 28px;
  width: 100% !important;
  flex: 8;
}
::v-deep .Selectbox .el-input__wrapper .el-input__inner {
  border: none;
}
/* 改变文本域样式 */
::v-deep .textTip .el-textarea__inner {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
}

.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/* 隐藏横向滚动条 */
.el-scrollbar__bar {
  display: none !important;
}

#el-id-878-3 .el-dialog__body {
  padding: 0 !important;
}

/* 改变上传框框的大小 */
::v-deep .el-upload--picture-card {
  border: 1px dashed #e7e7e9;
}
::v-deep .el-upload--picture-card:hover {
  border-color: #e7e7e9;
  color: #e7e7e9;
}
::v-deep .el-upload--picture-card {
  width: 70px;
  height: 70px;
  font-size: 16px !important;
}
::v-deep .el-upload {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-actions:hover {
  opacity: 1;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}
::v-deep .el-upload--picture-card .el-icon-plus {
  width: 28px;
  height: 28px !important;
  line-height: 1.7 !important;
}
::v-deep .avatar {
  width: 70px;
  height: 70px;
}

/* 确认按钮样式 */
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content:flex-end;
  margin-top: 40px;
}

/* 修改分页的背景颜色 */
::v-deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #409eff !important;
}

/* 弹窗标题样式 */
.work_a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}
.uploadTit {
  margin: 20px 18px 17px 7px;
  font-weight: 600;
  width: 88px;
  text-align: end;
}
.work_b {
  flex: 2;
  line-height: 32px;
  text-align: center;
  width: 78px;
  font-weight: 600;
}
.work_c {
  font-weight: 600;
  flex: 2;
  display: flex;
  justify-content: center;
  margin-top: 7px; 
}
.vestTit {
  font-weight: 600;
  display: flex;
  justify-content: center;
  margin-top: 7px; 
  margin-left: 30px;
  width: 60px;
}
.siteVest_a {
  font-weight: 600;
  flex: 2;
  display: flex;
  justify-content: center;
  margin-top: 7px;
}

.workInput {
  display: flex; 
  justify-content: center; 
  align-items: center
}
.workInput_a {
  flex: 2; 
  line-height: 20px;
  text-align: center; 
  font-weight: 600
}
.workInput_b {
  flex: 2; 
  line-height: 38px; 
  /* text-align: center;  */
  font-weight: 600
}
.workInput_c {
  display: flex; 
  margin-top: 25px; 
  margin-bottom: 25px
}
.workInput_d {
  flex: 8; 
  background-color: #e8e8e8; 
  padding-left: 6px; 
  border-radius: 3px; 
  box-sizing: border-box;
}
.workInput_e {
  flex: 8; 
  background-color: #e8e8e8; 
  padding-left: 6px; 
  border-radius: 3px; 
  box-sizing: border-box;
}

.workInput_f {
  flex: 8; 
  background-color: #e8e8e8; 
  padding-left: 6px; 
  border-radius: 3px; 
  box-sizing: border-box;
}

/* 新功能样式 */
.workInput_d_a {
  background-color: #e8e8e8; 
  box-sizing: border-box;
  padding: 9px; 
  border-radius: 3px; 
  margin-bottom: 10px;
}
.add_work {
  font-size: 40px;
  cursor: pointer;
  text-align: center;
}

::v-deep .enterpriseName_a .el-input__inner {
  /* width:100%; */
  background-color: #fff;
  border-color: #fff;
  color: #000;
  /* padding: 10px; */
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 25px;
  border-radius: 3px;
}

.delbtn {
  width: 50px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
  background-color: #f56c6c;
  margin-top: 5px;
}

</style>
